import React, { useEffect, useRef, useState } from 'react';
import fanhui from '../../images/返回.svg'
import './books_scan.css'
import { useNavigate } from 'react-router';
function BooksScan() {
  let html5QrCode = new Html5Qrcode("reader");
  let navigate = useNavigate()
  let setvideo = () => {
    navigator.mediaDevices.getUserMedia(
      { video: { width: 500, height: 500 } },
      stream => video.srcobject = stream,
      err => console.log(err)
    )

  }
  let video = useRef(null);
  let [isLogin, setLogin] = useState(false);

  //摄像头数据对象
  let [mediaTrack, setMediaTrack] = useState(null);

  //显示人脸识别获取摄像头的信息，并把视频流显示到video上
  const showFace = () => {
    const containers = {
      video: { width: 500, height: 300 }
    }
    const promise = navigator.mediaDevices.getUserMedia(containers);

    promise.then(mediaStream => {
      console.log(mediaStream);
      video.current.srcObject = mediaStream;

      //判断是否已经停止,摄像头数据回填
      let mediadata = typeof (mediaStream.stop) === "function" ? mediaStream : mediaStream.getTracks()[0]
      setMediaTrack(mediadata)

      video.current.play().catch((err) => {
        console.log(err)
      })
    }).catch(error => {
      console.log("获取摄像头失败");
    })
  }

  const closeMedia = () => {
  }
  useEffect(() => {
    showFace()
    return () => {
      mediaTrack && mediaTrack.stop();//停止摄像头
      console.log('关闭摄像头');
      console.log(mediaTrack);
    }
  }, [])
  return (
    <div className='booksScan'>
      <div className='header'>
        <label><img src={fanhui} style={{ height: "18px" }} onClick={() => { navigate('/books') }} /></label>
        扫一扫
      </div>
      <div className='video'>
        <video ref={video} width="375px" height="627px" ></video>
      </div>
      <div className='mask'>
        <div className="region">
          <div className='pointer'>
            <div className='move'>

            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BooksScan